<template>
  <div class="">
    <el-form :inline="true" :model="selectBody" class="demo-form-inline">
      <el-form-item label="ID">
        <el-input v-model="selectBody.id" placeholder="请输入ID" clearable />
      </el-form-item>
      <el-form-item label="用户 Id">
        <el-input v-model="selectBody.userId" placeholder="请输入User Id" clearable />
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="selectBody.username" placeholder="Username" clearable />
      </el-form-item>
      <el-form-item label="结果">
        <el-input v-model="selectBody.result" placeholder="请选择结果" clearable />
      </el-form-item>
      <el-form-item label="原因">
        <el-input v-model="selectBody.reason" placeholder="请输入查询原因" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="tableData" style="width: 100%" stripe>
      <el-table-column v-for="(row, rowIndex) in tableHead" :key="rowIndex" :label="row.label" :prop="row.prop" :formatter="row.formatter" />
      <!-- <el-table-column align="right"> -->
      <!-- <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template> -->
      <!-- </el-table-column> -->
    </el-table>

    <div class="pagination">
      <div class="demo-pagination-block">
        <el-pagination
          v-model:current-page="selectBody.curPage"
          v-model:page-size="selectBody.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {ref, toRef, reactive} from 'vue'
import {recordList} from '@/network/manage/api_userLogin.js'
import {CODE_SUCCESS} from '@/common_js/common_variable'
import {ElNotification} from 'element-plus'

export default {
  name: 'UserLogin',
  components: {},
  setup() {
    // const store = useCounterStore()

    const loading = ref(false)
    let selectBody = reactive({
      id: '',
      userId: '',
      username: '',
      result: '',
      reason: '',
      curPage: 1,
      pageSize: 10,
    })
    let tableHead = ref([
      {label: '数据ID', prop: 'id'},
      {label: '用户ID', prop: 'userId'},
      {label: '用户名', prop: 'username'},
      {
        label: '结果',
        prop: 'result',
        formatter: (row, column, cellValue) => {
          if (cellValue === 'S') return '成功'
          if (cellValue === 'F') return '失败'
          if (cellValue === 'I') return '初始化'
          return cellValue
        }
      },
      {label: '原因', prop: 'reason'},
      {label: '登录时间', prop: 'createdTime'},
    ])
    let tableData = ref([])
    let total = ref(1)
    const onSubmit = () => {
      loading.value = true
      recordList(selectBody)
        .then(res => {
          if (res.code != CODE_SUCCESS) {
            return
          }
          tableData.value = res.data.dataList
          total.value = res.data.total
          selectBody.curPage = res.data.curPage
        })
        // .catch(error => {
        //   ElNotification({
        //     title: '请求失败',
        //     message: error.message,
        //     type: 'error',
        //   })
        // })
        .finally(() => {
          loading.value = false
        })
    }
    // const handleEdit = (idx, row) => {
    //   console.log(idx)
    //   console.log(row)
    // }
    // const handleDelete = (idx, row) => {
    //   console.log(idx)
    //   console.log(row)
    // }
    // 每页条数改变
    const handleSizeChange = newSize => {
      selectBody.pageSize = newSize
      onSubmit()
    }
    // 当前页改变
    const handleCurrentChange = newPage => {
      selectBody.curPage = newPage
      onSubmit()
    }
    return {
      selectBody,
      onSubmit,
      loading,
      tableHead,
      tableData,
      total,
      // handleEdit,
      // handleDelete,
      handleSizeChange,
      handleCurrentChange,
    }
  },
}
</script>

<style scoped>
.example-showcase .el-loading-mask {
  z-index: 9;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
}
.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}
</style>